<template>
    <div class="app-container">
        <UserFrom ref="userFromRef" @fromQuery="fromQuery" @reset="reFresh">
        </UserFrom>

        <sysQueryutils
            @toolClick="toolClick"
            :btnList="btnList"
            @reFresh="reFresh"
            :loading="loading"
        ></sysQueryutils>

        <userTable
            v-model:loading="loading"
            :tableData="tableData"
            @reFresh="reFresh(false)"
            @handleUserOpenDialog="handleUserOpenDialog"
        ></userTable>

        <template v-if="pageInfo.total > 0">
            <div>
                <pagination
                    v-model:total="pageInfo.total"
                    v-model:page="pageInfo.page"
                    v-model:limit="pageInfo.limit"
                    @pagination="searchPagination"
                />
            </div>
        </template>

        <!-- 用户导入 -->
        <UserImport v-model="importDialogVisible" />

        <viewUserDialog
            v-model="dialogViewUserVisible"
            :viewUserRes="viewUserRes"
        ></viewUserDialog>

        <!-- 编辑和添加是一个 -->
        <addUserDialog
            v-model:modelValue="dialogAddUserVisible"
            :userDialogType="userDialogType"
            :userId="userId"
            @reFresh="reFresh(false)"
        ></addUserDialog>
    </div>
</template>

<script setup lang="ts">
import { btnList } from "@/views/system/userManager";
import fileRequest from "@/api/system/fileRequest";
import UserAPI from "@/api/system/user";
import type { queryParams, reset, btnObj } from "@/views/system/userManager";

const userFromRef = ref();
const loading = ref(false);

const userDialogType: any = ref("添加");
const userId: any = ref("");
/**
 *  添加 查看 编辑 导入数据 弹窗
 */
const dialogAddUserVisible = ref(false);
const dialogViewUserVisible = ref(false);
const importDialogVisible = ref(false);

// 查询参数
let pageInfo = reactive<queryParams>({
    page: 1,
    limit: 10,
    total: 0,
});

// 表格数据
let tableData = ref([] as any);

// 分页查询表单
async function searchPagination(value: any) {
    userFromRef.value.querTableList();
}
// reFresh
async function reFresh(isReFresh: boolean = true) {
    if (isReFresh) {
        pageInfo.page = 1;
        pageInfo.limit = 10;
    }
    userFromRef.value.querTableList();
}

// 查询表单
async function fromQuery(formObj: any) {
    let [province, city, district, town, village] = formObj.part;
    let params = {
        page: pageInfo.page,
        limit: pageInfo.limit,
        user_name: formObj.user_name,
        user_type_id: formObj.user_type_id,
        status: formObj.status,
        province: province || "",
        city: city || "",
        district: district || "",
        town: town || "",
        village: village || "",
    };
    loading.value = true;
    await UserAPI.getList(params)
        .then((res: any) => {
            tableData.value = res.data;
            pageInfo.page = res.current_page;
            pageInfo.total = res.total;
            pageInfo.limit = res.per_page;
        })
        .catch((err: any) => {
            console.log(err);
        })
        .finally(() => {
            loading.value = false;
        });
}

// 工具列表点击
async function toolClick(item: btnObj) {
    switch (item.name) {
        case "添加用户":
            userDialogType.value = "添加";
            dialogAddUserVisible.value = true;
            break;
        case "批量导入":
            importDialogVisible.value = true;
            break;
        case "导出":
            handleExport();
            break;
        default:
            break;
    }
}

// 导出用户
function handleExport() {
    console.log(userFromRef.value.formObj);
    let formObj = JSON.parse(JSON.stringify(userFromRef.value.formObj));
    let [province, city, district, town, village] = formObj.part;
    let params = {
        user_name: formObj.user_name,
        user_type_id: formObj.user_type_id,
        status: formObj.status,
        province: province || "",
        city: city || "",
        district: district || "",
        town: town || "",
        village: village || "",
    };
    let opt = {
        url: `/admin/user/export`,
        methods: "post",
        data: params,
    };
    fileRequest.downloadFileRequest(opt);
}

/***
 * viewUser 查看用户 {id}    res: viewUserRes
 * editUser 编辑用户 {id}
 * resetPassword 重置密码 {id}
 * mmodifyState 修改状态 {id}
 */
// table操作弹窗
function handleUserOpenDialog(rowInfo: any) {
    if (rowInfo.type === "查看") {
        viewUser(rowInfo.item.row.id);
    }
    if (rowInfo.type === "编辑") {
        userId.value = rowInfo.item.row.id;
        userDialogType.value = "编辑";
        dialogAddUserVisible.value = true;
    }
}

let viewUserRes = ref([] as any);
// 查看用户
async function viewUser(id: string) {
    loading.value = true;
    await UserAPI.viewUser({ id })
        .then((res: any) => {
            viewUserRes.value = res;
            dialogViewUserVisible.value = true;
        })
        .catch((err: any) => {
            console.log(err);
        })
        .finally(() => {
            loading.value = false;
        });
}
</script>

<style lang="scss" scoped>
.common_sty {
    padding: 0px 33px 27px 33px;
    background: #ecf0fe;
}
.app-container {
    @extend .common_sty;
    /* 57px = navbar = 57px */
    height: calc(100vh - 57px);
    overflow-y: scroll;
}

/** 开启tag标签  */
.hasTagsView {
    .app-container {
        @extend .common_sty;
        /* 84px = navbar + tags-view = 83px + 73px */
        height: calc(100vh - 141px);
        overflow-y: scroll;
        padding: 0px 33px 23px 33px;
    }
}
</style>
